<template>
<el-form :model="form">
  <el-form-item label="账号:">
    <el-input v-model="form.name" placeholder="请填写账号" clearable  size="large" @blur="validName"/>
  </el-form-item>
  <el-form-item label="密码:">
    <el-input v-model="form.pwd" placeholder="请填写密码" clearable  size="large" />
  </el-form-item>
</el-form>

</template>

<script>
import { getCurrentInstance } from 'vue' 
export default {
    name: 'RegisterInput',
    props: ['form'],
    setup(props){
      const { proxy } = getCurrentInstance()
      //验证账号是否通过
      function validName() {
        const reg = /^[a-zA-Z0-9\u4E00-\u9FA5]{6,12}$/
        !reg.test(props.form.name) && proxy.$message.warning('用户名应为6-12位英文，数字，下划线，中文')
        //返回成功标识
        props.form.isTrue = reg.test(props.form.name)
      }
      return {
        validName
      }
    }
}
</script>

<style lang="less" scoped>
  .el-form {
    margin: auto;
    width: 255px;
    :deep(.el-form-item__label) {
      font-size: 20px;
      line-height: 38px;
    }
  }
</style>